<template>
 <div>
   <!--<van-nav-bar title="文章详情" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>-->
   <div class="details" v-if="data.info.content_type == '1'">
     <p class="title">{{data.info.title}}</p>
     <div class="detailsTip">
       <span>{{data.info.create_time}}</span>
       <span><img src="@/assets/images/ic_browse.png" alt="">{{data.info.pv}}</span>
     </div>
     <p class="wenzi" ref="content" v-html="$options.filters.unescape(data.info.content)">
     </p>
   </div>
   <div class="details" v-if="data.info.content_type == '2'">
     <p class="title">{{data.info.title}}</p>
     <div class="detailsTip">
       <span>{{data.info.create_time}}</span>
       <span><img src="@/assets/images/ic_browse.png" alt="">{{data.info.pv}}</span>
     </div>
     <iframe :src="data.info.content_url" frameborder="false" sandbox="allow-scripts allow-same-origin"
             allowtransparency="true"  id="detailsFrame" ref="detailsFrame" name="detailsFrame"
             style="width:100%"></iframe>
   </div>

 </div>
</template>

<script>
    /**
     *
     * @Author zzl
     * @Date 2019/5/10 0010 11:12.
     */
    import { Indicator } from 'mint-ui';
    import utils from '../../../lib/StringExtend'
    export default {
        mounted() {
          this.iframeWidth = document.documentElement.clientWidth+'px';
          this.form.article_id = this.$route.query.id;
          this.loadData();

        },
        components: {},
        props: {},
        data() {
            return {
              // iframeHeight:undefined,
              iframeWidth:undefined,
              wechatId:utils.getCookie('wechat_id'),
              form:{
                article_id:undefined,
                open_id: undefined,
              },
              data:{
                info:{
                  title:undefined,
                  create_time:undefined,
                  pv:undefined,
                  content:undefined,
                  content_type:undefined,
                  content_url:undefined,
                },
                day_points_limit:undefined, //每日上限工分
                per_min:undefined,          //每次有效阅读时间，单位：分
                work_points:undefined,      //每次有效阅读获得工分
              },
              // 工分计时器器
              overTimer: null,
              // 是否超时
              isOvertime: false,
            }
        },
        computed: {},
        methods: {
          //详情数据
          loadData(){
            this.form.open_id = utils.getCookie('open_id_'+this.wechatId);
            Indicator.open('加载中...');
            this.$axios.articleGetArticledetail(this.form).then(res=>{
              Indicator.close();
              if(res.errcode !== '000'){
                this.$toast(res.errmsg);
                return;
              }
              this.data = res.data;
              //给iframe加高度
              if(this.data.info.content_type == '2'){
                this.$nextTick(() =>{
                  document.getElementById('detailsFrame').style.height = document.documentElement.clientHeight+'px';
                });
              }

              // 开启定时器
              var time = this.data.per_min*60*1000;
              this.overTimer = setInterval(() => {
                this.getWorkpoints();
              },time)
            })
          },

          //获取工分
          getWorkpoints(){
            this.$axios.articleSetScore(this.form).then(res=>{
                this.$toast(res.errmsg);
            })
          },
          //返回
          onClickLeft(){
            this.$router.go(-1)
          }
        },
        watch: {},
        filters: {},
        destroyed () {
          // 销毁定时器
          clearTimeout(this.overTimer)
        },
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
  .detailsFrame{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .details{
    padding: 0.39rem;
    overflow: hidden;
    .title{
      color: #292929;
      font-size: 0.36rem;
      text-align: left;
    }
    .detailsTip{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0.3rem 0;
      font-size: 0.22rem;
      color: #CECFD3;
      align-items: center;
      span{
        display: flex;
        flex-direction: row;
      }
    }
    img{
      width: 0.28rem;
      height: 0.23rem;
      display: block;
      margin-right: 0.1rem;
    }
    .wenzi{
      font-size: 0.28rem;
      line-height: 0.48rem;
      text-align: left;
      color: #6A6D70;
      margin-top: 0.3rem;
      overflow: auto;
    }
  }
</style>
